Working with the Viewer > Customizing the Viewer > Customization Overview > Customization Examples > Customizing the Markup |
All of the markup in the Viewer is customizable.
You can change the markup of the Viewer UI components by editing the templates. The templates are HTML files ending in *.Template.html. The primary navigation tabs and menus are located in viewerTemplate.html.
To create your own version of the viewer template you will need to update the template name where it is being loaded in viewer.js. For instance, if you copy viewerTemplate.html to a new file called customTemplate.html you would change:
Example |
Copy Code
|
---|---|
element.html(_.template(options.template.viewer, ... |
To:
Example |
Copy Code
|
---|---|
element.html(_.template(options.template.custom, ... |
Currently in the samples "Template" is removed from the name of the template property in the template object. For example, viewerTemplate.html becomes template.viewer. |
The templates are consumed using the Underscore.js Template utility function. Variables and JavaScript conditions can be used within the templates using ERB syntax. For more information, refer to the Underscore documentation at http://underscorejs.org/#template.
Example |
Copy Code
|
---|---|
<!-- An example of a variable --> <button data-pcc-rotate class="pcc-icon pcc-icon-rotate" title="<%= rotate %>"></button> |
Throughout the templates, on many elements, there are data attributes starting with data-pcc-. These are used to identify elements and bind them to functionality defined in viewer.js:
Example |
Copy Code
|
---|---|
<!-- This button will rotate the current page when clicked --> <button data-pcc-rotate class="pcc-icon pcc-icon-rotate"></button> <!-- Other elements can perform the same function --> <div data-pcc-rotate class="customClass"></div> |
Using the above example, this attribute is used as a selector for a $rotatePage jquery object in viewer.js:
Example |
Copy Code
|
---|---|
this.viewerNodes = { $rotatePage: viewer.$dom.find("[data-pcc-rotate]") ... |
This attribute is then bound to a click event which rotates the current page:
Example |
Copy Code
|
---|---|
// Rotate Page button viewer.viewerNodes.$rotatePage.on('click', function () { viewer.viewerControl.rotatePage(90); }); |
The named mouse tools, like this one, are provided by viewercontrol.js:
Example |
Copy Code
|
---|---|
<button data-pcc-mouse-tool="AccusoftSelectToZoom" class="pcc-icon pcc-icon-rectanglezoomtool"></button> |
A named mouse tool can be used in the default UI of the Viewer. This allows one or more tools to be pre-configured. Setting the data-pcc-mouse-tool attribute to false will prevent the context menu from opening if the mouse tool is an annotation or redaction.
Enabling a custom tool in the viewer UI requires modification of the viewerTemplate.html, as shown in the example below:
Example |
Copy Code
|
---|---|
<!-- The following markup will create a button that enables use of the mouse tool named "MyLineTool". --> <button data-pcc-mouse-tool="MyLineTool" data-pcc-context-menu="false" class="pcc-icon pcc-icon-annotate-line" title="My Line Tool"></button> |